<template>
	<view class="cont">
		<view class="cont-navbar">
			<u-navbar :is-back="false" :border-bottom="false">
				<view class="slot-wrap u-col-center u-flex-1 u-flex u-p-l-24 u-p-r-24">
					<u-image 
						width="200rpx"
						height="50rpx"
						src="https://www.baidu.com/img/flexible/logo/pc/result.png" 
						mode="aspectFit"></u-image>
					<view class="u-flex-1 u-p-l-20 u-p-r-20">
						<u-search 
							shape="round" 
							bg-color="#fff"
							border-color="#e2e2e2"
							placeholder="输入关键字" 
							:show-action="false"
							disabled
							@click="openPage('/pages/search/index')"></u-search>
					</view>
					<view class="relative">
						<u-icon 
							name="list-dot" 
							:color="infoColorError" 
							size="48" 
							@click="showOptions = !showOptions"></u-icon>
						<selectDrop
							:show="showOptions"
							:options="options"
							@close="showOptions = false"
							@ok="selectItem"/>
					</view>
				</view>
			</u-navbar>
		</view>
		
		<view class="cont-list u-p-24">
			<itemGoods :list="list" />
			
			<!-- 数据为空 -->
			<empty
				:show="nodata"
				marginTop="100"
				text="还没有商品哦~"
				src="https://h5.dhcc.wang/images/O2Oplus/default_goods.png" />
			
			<!-- 加载更多 -->
			<u-loadmore
				v-if="!nodata"
				:status="loadstatus" 
				margin-top="30"
				margin-bottom="20"
				bg-color="#f8f8f8"/>
		</view>
		
		<!-- <u-popup 
			v-model="showArea" 
			mode="right"
			width="80%">
			<view>1111</view>
		</u-popup> -->
		
		<u-back-top 
			:scroll-top="scrollTop" 
			:icon-style="{fontSize: '36rpx',color: infoColorError}"></u-back-top>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isLogin: false,
			
			// 导航栏---------------
			scrollTop: 0,
			background: {
				background: '',
			},
			
			keyword: '',
			showOptions: false,
			options: [
				{
					title: '金牌会员',
					url: '/pages/center/goldService',
					key: 'gold'
				},
				{
					title: '我要充值',
					url: '/pages/center/index',
					key: 'recharge',
					type: 'switch'
				},
				{
					title: '我的商机',
					url: '/pages/business/index',
					key: 'business',
					type: 'switch'
				},
				// {
				// 	title: '地区检索',
				// 	url: '/pages/search/index',
				// 	key: 'search'
				// }
			],
			showArea: false,
			
			nodata: false,
			page: 1,
			pageSize: 10,
			loadstatus: 'loading', // 加载前值为loadmore，加载中为loading，没有数据为nomore
			list: []
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
	onLoad(query) {
		this.background.background = this.infoColorError
	
		this.init()
	},
	onReady() {
		// 是否登录
		uni.$on(this.ENUM.EVENT_LOGIN_KEY, () => {
			this.getStorage()
		})
	},
	onPullDownRefresh() {
		this.init()
	},
	onUnload() {
		uni.$off(this.ENUM.EVENT_LOGIN_KEY)
	},
	onReachBottom() {
		if (this.loadstatus == 'nomore') return
		this.getList()
	},
	methods: {
		init() {
			this.getStorage()
			this.getList(true)
		},
		
		getStorage() {
			// uni.hideShareMenu()
		},
		
		getList(init = false) {
			this.loadstatus = 'loading'
			if (init) {
				this.page = 1
				this.nodata = false
			}
			// this.$api.getDemo({
			// 	page: this.page,
			// 	pageSize: this.pageSize
			// }, init).then(res => {
			// 	// 11111
			// })
			setTimeout(() => {
				if (init) this.list = []
				let list = [
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					},
					{
						title: '采购11111'
					}
				]
				// this.list.length && list.length < this.pageSize // loadstatus条件
				this.loadstatus = (this.list.length === 30) ? 'nomore' : 'loadmore'
				this.list = [...this.list, ...list]
				
				this.page++
				this.nodata = this.list.length === 0
				uni.stopPullDownRefresh()
			}, 1000)
		},
		
		selectItem(index) {
			let item = this.options[index]
			if (item.url) {
				this.openPage(item.url, item.type)
			}
		},
		
		openPage(url, type) {
			this.$common.openPage(url, type)
		},
		
		toLogin() {
			// this.$common.getUserInfo()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .u-wrap {
	background-color: transparent;
}

.cont {
	overflow-x: hidden;
	min-height: 100vh;
	padding-bottom: calc(var(--window-bottom) + 10px);
}
</style>
